<!-- 角色新增、修改 -->
<template>
  <div>
    <el-dialog :title="$t('lan.rolePermission')" :visible.sync="rolePermissions.showDialog" width="650px" :close-on-click-modal="false" top="5vh">
      <!-- 角色权限树开始 -->
      <el-row style="padding:0px 10px;" v-loading="showLoading" :element-loading-text="$t('lan.dataLoading')">
        <el-col>
          <el-tree class="treeStyle filter-tree" empty-text="" :props="defaultProps" :data="treeData" node-key="id" show-checkbox @check="change" default-expand-all ref="treeList" :default-checked-keys="checkedRoleIds"></el-tree>
        </el-col>
      </el-row>
      <!-- 角色权限树结束 -->

      <!-- 底部按钮开始 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="saveRole">{{$t('lan.submit')}}</el-button>
        <el-button size="medium" @click="rolePermissions.showDialog = false">{{$t('lan.cancel')}}</el-button>
      </span>
      <!-- 底部按钮结束 -->
    </el-dialog>
  </div>
</template>
<style scoped>
.treeStyle {
  background: #fff;
  padding: 10px;
  max-height: 400px;
  overflow: auto;
}
</style>
<script>
export default {
  props: ['rolePermissions'],
  data () {
    return {
      checkedRoleIds: [],//获取选中id
      //资源树列表
      treeData: [],
      defaultProps: {
        children: 'subMenuBOList',
        label: localStorage.getItem('languageSet') === 'zh' ? 'name' : 'englishName'
      },
      getList: [],//获取角色相关的资源树
      showList: false,//是否显示dialog
      //新增、修改需要的数据
      data: {
        roleId: '',//角色id
        menuIdList: [],//资源树id
      },
      showLoading: false,
    }
  },
  methods: {
    //checkList触发
    change (data, checkedNodes) {
      this.data.menuIdList = []
      let getTreeId = this.$refs.treeList.getCheckedNodes(false, true)
      for (let i of getTreeId) {
        this.data.menuIdList.push(i.id)
      }
    },
    //保存用户
    async saveRole () {
      this.data.roleId = this.rolePermissions.roleId
      this.showLoading = true
      let url = '/roleMenu/save'
      let body = this.data
      let result = await this.request.httpRequest('POST', url, body)
      if (result.code == 200) {
        this.$message({ type: 'success', message: result.msg });
        this.$emit('close')
        this.rolePermissions.showDialog = false
      } else {
        this.$message({ type: 'error', message: result.msg })
      }
      this.showLoading = false
    },
    //获取资源树
    async getTreeList () {
      this.showLoading = true
      let url = `/menu/queryTree`
      let result = await this.request.httpRequest('GET', url)
      if (result.code == 200) {
        this.treeData = result.data
        this.showLoading = false
      } else {
        this.showLoading = false
        this.$message({ type: 'error', message: result.msg })
      }
    },
    //根据角色获取资源树
    async getTreeDetail () {
      let url = `/menu/queryTreeByRole/${this.rolePermissions.roleId}`
      let result = await this.request.httpRequest('GET', url)
      if (result.code == 200) {
        if (result.data) {
          this.$nextTick(() => {
            this.getList = result.data
            var treeList = []
            for (let j of this.getList) {
              for (let a of j.subMenuBOList) {
                treeList.push(a.id)
              }
            }
            this.checkedRoleIds = treeList
          })
        }

      }
    },
  },
  mounted () {
    Promise.all([this.getTreeList(), this.getTreeDetail()].map(a => a.catch(e => e)))
  }
}
</script>
